@import "@/styles/variables.scss";
.container_page {
  height: 100vh;
  width: 100vw;
  background-color: #eff1f7;

  .header {
    position: relative;
    background-color: $OVERALL_SITUATION_BACKGROUND;
    height: 272rpx;

    .fixedPane {
      position: fixed;
      width: 100%;
      padding: 24rpx;
    }

    .select_type {
      display: flex;

      .selector {
        color: #fff;
        font-size: 32rpx;
        flex: 1;

        view[class*="cuIcon"] {
          display: inline-block;
          margin: 0 10rpx;
        }
      }
    }

    .search_bar {
      display: flex;
      line-height: 80rpx;
      font-size: 28rpx;
      margin: 20rpx 0;

      .search_input {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
        padding: 0 24rpx;
        border-radius: 20rpx;

        input {
          flex: 1;
          font-size: 28rpx;
        }
      }
    }
  }

  .main {
    height: calc(100vh - 376rpx);
    overflow: auto;
    background: $OVERALL_SITUATION_BACKGROUND_GRADIENT;
    // margin: 0 24rpx;

    .card {
      border-radius: 20rpx;
      background: white;
      padding: 24rpx;
      position: relative;
      margin: 0 24rpx 24rpx;

      & > view:not(:last-child) {
        margin-bottom: 20rpx;
      }

      .title {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
        width: 500rpx;
      }

      .subTitle {
        font-size: 30rpx;
        color: #333;
      }

      .content {
        color: $OVERALL_SITUATION_BACKGROUND;
        padding: 6rpx 12rpx;
        display: inline-block;
        background-color: rgba(51, 91, 199, 0.1);
        border-radius: 20rpx;
      }

      &:after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        padding: 6rpx 12px;
        border-radius: 0 20rpx;
      }
    }

    // 搜索类型： 未完成
    .card.state1 {
      &::after {
        content: "未执业";
        background-color: #e81a1a;
      }
    }

    // 搜索类型： 执业中
    .card.state2 {
      &::after {
        content: "执业中";
        background-color: rgba(51, 91, 199, 0.7);
      }
    }

    // 搜索类型： 已执业
    .card.state3 {
      &::after {
        content: "已执业";
        background-color: #345ac7;
      }
    }

    // 搜索类型： 待审核
    .card.state4 {
      &::after {
        content: "待审核";
        background-color: #98a808;
      }
    }

    // 搜索类型： 已审核
    .card.state5 {
      &::after {
        content: "已审核";
        background-color: rgba(54, 224, 66, 0.7);
      }
    }

    // 搜索类型： 已完成
    .card.state6 {
      &::after {
        content: "已完成";
        background-color: #36e042;
      }
    }
  }

  .footer {
    position: fixed;
    width: 100%;
    background: white;
    bottom: 0;
    z-index: 9;
    height: 100rpx;
    .btn_add {
      background: $OVERALL_CONFIRM_BUTTON_COLOR;
      border-radius: 20rpx;
      text-align: center;
      color: white;
      margin: 10rpx auto;
      font-size: 28rpx;
      line-height: 80rpx;
      width: calc(100% - 40rpx);
      .cuIcon-add {
        display: inline-block;
        margin-right: 10rpx;
      }
    }
  }
}
